<template>
  <div class="main">
    <div class="title">
      Virus lncRNA - Host miRNA
      <div class="subTitle">
        Only the interactions among viral lncRNAs and human miRNAs with the seed region complementarity score (sc) greater than 200, and energy less than -40 kcal/mol are shown.</div>
    </div>

    <div class="content">
      <div v-loading="leftLoading" class="left">
        <div class="sub-title">Virus family :</div>

        <div class="scrollview">
          <div :class="['item', qury.viralFamily === n.viral_family ? 'active': '']"
               v-for="(n, idx) in familys" :key="idx"
               @click="speciesClick(n)">
            {{n.viral_family}}
          </div>
        </div>
      </div>
      <div v-loading="loading" class="right">
        <div class="rna-warp">
          <div class="item" style="cursor: pointer" v-for="(item, idx) in list" :key="idx" @click="itemClick(item)">
<!--            <div class="imgWarp">-->
<!--              <div v-if="item.hasMi">-->
<!--                <div style="width: 130px;height: 130px">-->
<!--                  <img :src="item.milog" @click="itemClick(item, 'miranda')"/>-->
<!--                </div>-->
<!--                <div class="desc">predict</div>-->
<!--              </div>-->

<!--              <div v-if="item.hasExp">-->
<!--                <div style="width: 130px;height: 130px">-->
<!--                  <img :src="item.explog" @click="itemClick(item, 'experiment')"/>-->
<!--                </div>-->
<!--                <div class="desc">experiment</div>-->
<!--              </div>-->

<!--            </div>-->
            <div >{{item.name}}</div>
            <div class="bluetitl">{{item.virus_species}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import {getAllFamilys, getVirusByFamily, virusGroups} from "../../api/interaction";

export default {
  name: "Host",
  data() {
    return {
      familys: [],
      sorts: ["HHV4","HHV5","MuHV4","SINV","PRV","MuHV1","GaHV2","BoHV1","HHV8","IIV6","POLRSV","VACV","ASFV","SGIV","HIV1","OrV","SCMV","WSMV","CMV","TriMV","NoV","SbMV","SPFMV","ChNRV1","HAdVC","SaHV2","MCMV","PVY","BBSV","TSWV","CFAV","ORSV","CyMV","ZIKA","CymRSV","BLV","SARS","IAV","TYLCCNV","ZEBOV","RSV","DENV","ACoV1","CGMMV","TYLCV","TYLCSV","GAMaV","EAV","CLRDV","SPCSV","SV40","SRMV","FeFV","CVA","CPPV1","HMPV","TLCCNB","PNRSV","BYSMV"],
      list: [],
      qury: {
        viralFamily: ""
      },
      loading: false,
      leftLoading: false,
      isFristInto: true,
    }
  },
  mounted() {
    this.loadFamilys();
  },
  methods: {
    async loadFamilys() {
      this.leftLoading = true
      const res = await getAllFamilys();
      this.familys = res.data
      this.leftLoading = false

      if (this.isFristInto) {
        this.isFristInto = false

        let defFam = null
        this.familys.some(n => {
          if (n.viral_family == "Coronaviridae") {
            defFam = n
            return true
          }
          return false
        })

        this.speciesClick(defFam ?? this.familys[0])
      }
    },
    async loadData() {
      this.loading = true
      const res = await getVirusByFamily(this.qury)

      let miSets = new Set();
      let expSets = new Set();

      res.data.map( n => {
        if (n.node_type === 'miranda') {
          miSets.add(n.abbreviation);
        }else {
          expSets.add(n.abbreviation);
        }
      })


      // 需要同时一组展示，所以处理是否含两种类型
      let arr = []
      for (let val of miSets) {
        let hasExp = expSets.has(val)
        arr.push({
          name: val,
          hasMi: true,
          hasExp: hasExp
        })

        if (hasExp) {
          expSets.delete(val)
        }
      }

      for (let val of expSets) {
        arr.push({
          name: val,
          hasMi: false,
          hasExp: true
        })
      }

      // 进行排序
      let j = 9999
      arr.map(n => {
        let idx = this.sorts.indexOf(n.name)
        n.seq = idx > -1 ? (idx + 1) : j;
        j++;

        let milog = ''
        let explog = ''
        try {
          if (n.hasMi) {
            milog = require(`@/assets/image/interaction-virus-virus/${n.seq >= 9999 ? 'none' : (n.seq + '_' + n.name)}.png`)
          }
        } catch (e) {
          milog = require(`@/assets/image/def.png`)
        }

        try {
          if (n.hasExp) {
            explog = require(`@/assets/image/interaction-virus-virus/${n.seq >= 9999 ? 'none' : (n.seq + '_' + n.name +'_experiment')}.png`)
          }
        } catch (e) {
          explog = require(`@/assets/image/def.png`)
        }

        n.milog = milog;
        n.explog = explog;

        // 匹配获取全称
        res.data.some(obj => {
          if (obj.abbreviation == n.name) {
            n.virus_species = obj.virus_species
            return true
          }
        })
      })

      arr.sort((a,b) => {
        return a.seq-b.seq;
      });

      this.list = arr
      this.loading = false
    },
    speciesClick(n) {
      console.log(n)
      this.qury.viralFamily = n.viral_family
      this.loadData()
    },
    itemClick(item) {
      this.$router.push({path: '/interaction/nodeView', query: {
          abbreviation: item.name,
          pageType: 1,
        }})
    },
  }
}
</script>

<style lang="stylus" scoped>

.main /deep/{
  //设置图标颜色
  .el-loading-spinner .path {
    stroke: #11427D;
  }
}

.main {
  width 1170px
  margin-top 20px
  padding-top 10px
  font-family: Times New Roman;

  .title {
    font-size 28px
    text-align left
    margin-bottom 20px
    padding 15px 0
    color #11427D
    font-weight 800
  }

  .subTitle {
    margin-top 20px
    font-size 18px
    color #0a2458

    .a {
      color #0a2458
      cursor pointer
      text-decoration underline
    }
    .a:hover {
    }
  }

  .content {
    display flex
    flex 1
    min-height 250px
    //height: calc(100vh - 320px);

    .sub-title {
      font-family: Decimal-Medium_Web, sans-serif;
      line-height 3
      font-size 18px
      font-weight 600
      color #0a2458
      text-transform: uppercase;
      margin-left 20px
      margin-bottom 10px
    }

    .left {
      width: 300px;
      display: flex;
      flex-direction: column;
      transition: padding-top .3s;
      overflow hidden
      box-shadow: 0 2px 12px 0 rgba(193, 193, 193, 0.39);
      padding 15px
      height: calc(100vh - 290px);

      position: sticky;
      top 30px
      left 0

      .item {
        padding 15px
        margin-right 10px
        color #0064bc
        font-size 15px
        cursor pointer
      }

      .active, .item:hover {
        background-color #f9f9f9
        color #9c1919
        text-decoration underline
        border-radius 8px
      }
    }

    .scrollview {
      flex 1
      transition: padding-top .3s;
      overflow hidden
      height: 100%;
    }

    .scrollview:hover {
      overflow-y: auto;
    }

    /* 滚动条整体部分 */
    .left::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    .right /deep/ {
      flex 1
      padding 0 30px
      box-sizing: border-box;
    }

    .rna-warp {
      display flex
      flex-wrap wrap
      padding 15px
      .item {
        //flex: 0 0 27%;
        width 260px
        display flex
        flex-direction column
        align-items center
        margin-bottom 40px
        div {
          font-weight 600
          margin-bottom 10px
          font-family Times New Roman
        }

        .bluetitl {
          color #11427d
          text-align center
        }
      }

      .desc {
        font-weight 500
        font-size 13px
        color rgba(122, 122, 122, 0.37)
      }

      .imgWarp {
        display flex
        div {
          text-align: center;
          //line-height: 170px;
        }
      }

      img {
        cursor pointer
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        margin-right 10px
      }
    }
  }
}
</style>
